import React, { Component } from 'react';
import './index.less';
import { Layout, Menu, Breadcrumb, Icon, Avatar, Dropdown, Button } from 'antd';
import logo from '../../public/img/logo.png';
import { Link } from 'umi';
import menuData from '../../mock/menu';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
import { connect } from 'dva';
function DropMenu(props) {
  const handleItem = val => {
    switch (val.key) {
      case '1':
        alert('该功能暂时没有开发哦');
        break;
      case '2':
        props.logout();
        break;
      default:
        break;
    }
  };
  return (
    <Menu onClick={handleItem}>
      <Menu.Item key="1">
        <Icon type="user"></Icon>
        {props.user.username}
      </Menu.Item>
      <Menu.Item key="2">
        <Icon type="logout"></Icon>注销
      </Menu.Item>
    </Menu>
  );
}
@connect(state => ({ user: state.user }), {
  logout: () => ({ type: 'user/removeUser' }),
})
export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: [],
      menuList: [],
    };
  }
  selectMenuItem(e) {
    this.setState({
      key: [...e.key],
      menuList: menuData[e.key - 1],
    });
  }
  render() {
    return (
      <Layout>
        <Header className="header">
          <img className="logo" src={logo} />
          <Menu
            onSelect={e => this.selectMenuItem(e)}
            theme="dark"
            mode="horizontal"
            selectedKeys={this.state.key}
          >
            <Menu.Item key="1">
              <Link className="topMenu" to="/home">
                首页
              </Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link className="topMenu" to="/about">
                关于
              </Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link className="topMenu" to="/goods">
                商品
              </Link>
            </Menu.Item>
          </Menu>

          <Dropdown
            className="auatar"
            overlay={<DropMenu {...this.props} />}
            placement="topCenter"
          >
            <Avatar src={this.props.user.userimg} icon="user" />
          </Dropdown>
        </Header>
        <Layout className="content">
          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              selectedKeys={['1']}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {this.state.menuList.map((v, i) => {
                return (
                  <SubMenu
                    key={v.keyValue}
                    title={
                      <span>
                        <Icon type={v.iconType} />
                        {v.title}
                      </span>
                    }
                  >
                    {v.children
                      ? v.children.map((cv, ci) => {
                          return (
                            <Menu.Item key={cv.keyValue}>
                              <Link to={cv.routeurl}>{cv.title}</Link>
                            </Menu.Item>
                          );
                        })
                      : null}
                  </SubMenu>
                );
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>List</Breadcrumb.Item>
              <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb>
            <Content
              className="site-layout-background"
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}
